<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>全选</title>
    <script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js">
    </script>
    <script>
        function checkAll(flag) {
            // 点击全选按钮的时候，最上面复选框要选中
            $('[name=hobby]').prop('checked',flag);
            // 点击全不选按钮的时候，最上面复选框不要选中
            $('#checkAll').prop('checked',flag);
        }
        function checkChange(src) {
            // 根据被点击的复选框，来决定下面这些爱好的复选框的选中状态
            var val = $(src).prop('checked');
            checkAll(val);
        }
        function checkUnAll() {
            $('[name=hobby]').each(function (i,dom) {
                //获取其选中状态
               var oldValue = $(dom).prop('checked');
               //取反
               var newValue = !oldValue;
               //再将取反的值设置回去
               $(dom).prop('checked',newValue);
            });
            //若爱好全选中,则上面的复选框也得选
            check();
        }
        function check() {
            var total = true;
            $('[name=hobby]').each(function (i,dom) {
                //取每个爱好的选中状态值
                var checked = $(dom).prop('checked');
                total = total && checked;
            });
            // 当遍历结束的时候，total 值仍是 true, 那么代表所有爱好复选框是选中的
            $('#checkAll').prop('checked',total);
        }
        $(function () {
            $('[name=hobby]').click(function () {
                check();
            });
        });
    </script>
</head>
<body>
请选择你的爱好:<br/>
<input type="checkbox" onchange="checkChange(this)" id="checkAll"/>全选/全不选
<br/>
<div>
    <input type="checkbox" name="hobby"/>JAVA&nbsp;
    <input type="checkbox" name="hobby"/>打篮球&nbsp;
    <input type="checkbox" name="hobby"/>上网&nbsp;
    <input type="checkbox" name="hobby"/>撩妹&nbsp;
    <input type="checkbox" name="hobby"/>运动&nbsp;
    <input type="checkbox" name="hobby"/>学习&nbsp;
</div>
<div>
    <input type="button" id="btn_checkAll" onclick="checkAll(true)"
           value="全选"/>
    <input type="button" onclick="checkAll(false)" value="全不选"/>
    <input type="button" onclick="checkUnAll()" value="反选"/>
</div>
</body>
</html>
